<template>
  <view class="content">
    <tui-loading v-if="loadingTips" :isMask="true"></tui-loading>
    <view v-if="videoSrc" class="videoView">
      <video id="myVideo" :direction='90' :object-fit="fill" :src="videoSrc" class="videoPlayer" controls
             enable-play-gesture></video>
    </view>
    <view class="richTextView">
      <u-parse :content="descContent"></u-parse>
    </view>
    <view :class="[status>0 ? 'signed' : 'isSign']" @tap="sign()">
      <image v-show="!locked" mode="aspectFit" src="https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/loack.png" style="width: 60rpx;
				height: 60rpx;"></image>
      <text v-if=" status>0">已签到</text>
      <text v-else>打卡签到</text>
    </view>
  </view>
</template>

<script>
import {
  getScenicIntrodce,
  userPlaceSign,
  selectPrevPlace
} from '@/api/tourplan.js'

export default {
  props: {
    idsData: {
      type: Object,
      default: {}
    },
  },
  data() {
    return {
      videoSrc: '',
      descContent: '',
      partyId: '',
      scenicId: '',
      loadingTips: false,
      locked: false, //是否解锁
      status: 0, //是否签到
      itineraryId: 0, //路线id
      prevSenicId: 0, //上个景点id
    }
  },
  created() {

  },
  onReady: function () {
    // #ifndef MP-ALIPAY
    this.videoContext = uni.createVideoContext('myVideo')
    // #endif
    this.initData()
  },
  methods: {
    initData() {
      const that = this
      that.locked = JSON.parse(that.idsData.locked)
      that.status = that.idsData.status
      that.groupScenicId = that.idsData.groupScenicId
      that.partyId = that.idsData.partyId
      that.scenicId = that.idsData.scenicId
      that.itineraryId = that.idsData.itineraryId
      if (that.idsData.prevSenicId) {
        that.prevSenicId = that.idsData.prevSenicId
        that.getPrev()
      }
      that.getIntrodce(that.scenicId)
    },
    //获取景点详情
    getIntrodce(scenicId) {
      const that = this
      getScenicIntrodce({
        scenicId: scenicId
      }).then(res => {
        that.videoSrc = res.explainVideo
        that.descContent = res.introduce
        that.loadingTips = false
      }).catch(err => {
        that.loadingTips = false
        uni.showToast({
          title: err,
          icon: 'none',
          duration: 3000
        })
        console.log(err)
      })
    },
    //查看上个景点是否上团队图片
    getPrev() {
      const that = this
      selectPrevPlace({
        itineraryId: that.itineraryId,
        tel: uni.getStorageSync('userinfo').phone,
        nowScenicId: that.scenicId,
        scenicId: that.prevSenicId
      }).then(res => {
        if (res) {
          that.locked = true
        }
      })
    },
    //用户签到
    sign() {
      const that = this
      if (that.status < 1 && that.locked) {
        userPlaceSign({
          groupScenicId: Number(that.groupScenicId),
          partyId: Number(that.partyId),
          status: 1,
          x: 100,
          y: 100
        }).then(res => {
          that.status = 2
          uni.showToast({
            title: '签到成功',
            icon: 'none',
            duration: 3000
          })
          // uni.$emit('upDetail', 'data')
        }).catch(err => {
          console.warn(err)
          uni.showToast({
            title: err,
            icon: 'none',
            duration: 3000
          })
        })
      } else {
        uni.showToast({
          title: '当前景点暂时无法签到',
          icon: 'none',
          duration: 2000
        })
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 30rpx;
  overflow: auto;

  .videoView {
    width: 90%;
    height: 300rpx;

    .videoPlayer {
      width: 100%;
      height: 100%;
    }
  }

  //富文本解析器
  .richTextView {
    margin-top: 30rpx;
    width: 90%;
    min-height: 300rpx;
    overflow: scroll;
    text-align: justify;
    padding-bottom: 110rpx;

    .htmlContent {
      width: 100%;
      height: 100%;
    }
  }
}

.isSign {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: absolute;
  bottom: 0;
  height: 100rpx;
  color: white;
  background-color: #4186F5;

  image {
    position: absolute;
  }
}

.signed {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: absolute;
  bottom: 0;
  height: 100rpx;
  color: white;
  background-color: #92BCFF;
}
</style>
